<template>
	<view class="">
		<u-navbar
			title="谁可以看"
			placeholder
			bgColor="#F8F8F8"
		>
			<view class="navbar__left" slot="left" @click="back">
				<text>取消</text>
			</view>
			<view class="navbar__right" slot="right" @click="submit">
				<view class="navbar__right--btn">完成</view>
			</view>
		</u-navbar>
		<view class="">
			<view class="list-box" v-for="(item,index) in list" :key="item.name" @click="change(item,index)">
				<view class="list" hover-class="clickable">
					<view class="list__left">
						<u-icon name="checkbox-mark" color="#ff4d4f" size="25" v-show="item.check"></u-icon>
					</view>
					<view class="list__right">
						<view class="list__right--title">{{item.name}}</view>
						<view class="list__right--des">{{item.des}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import {sendBackFunction} from '@/common/custom_util.js'
	
	export default {
		data() {
			return {
				list: [
					{
						name: '公开',
						des: '所有人可见',
						check: false,
						level: 'PUBLIC',
						code: 1
					},
					{
						name: '部分',
						des: '仅本组织可见（' + _data.localData('obsname') + '）',
						check: false,
						level: _data.localData('obscode'),
						code: 2
					},
					{
						name: '私密',
						des: '仅自己可见',
						check: false,
						level: _data.localData('userid'),
						code: 3
					},
				],
				current: {}
			}
		},
		onLoad(options) {
			this.current = JSON.parse(options.data);
			this.list.forEach(item => {
				if(this.current.name == item.name) item.check = true
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			change(v,i) {
				this.list.forEach(item => {
					item.check = false;
				})
				this.list[i].check = true;
				this.current = this.list[i]
			},
			submit() {
				sendBackFunction('setPermission',this.current);
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar__right {
		
		&--btn {
			font-size: 30rpx;
			width: 100rpx;
			height: 60rpx;
			background-color: #52c41a;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
	
	.list-box {
		background-color: #fff;
	}
	
	.list {
		display: flex;
		height: 100rpx;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		
		&__left {
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		&__right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			&--title {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 40rpx;
			}
			
			&--des {
				font-size: 26rpx;
				color: #aaa;
				line-height: 30rpx;
			}
		}
	}
</style>
